<template>
  <div class="detail">
    <detail-nav-bar ref="detailNavBar" @titleItemClick="titleItemClick"/>
    <b-scroll ref="bScroll" :b-scroll-object="bScrollObject" @scrollMonitor="scrollMonitor">
      <detail-swiper ref="detailSwiper" :top-images="topImages"/>
      <detail-basic-info :detail-basic-info-object="detailBasicInfoObject"/>
      <detail-shop-info :detail-shop-info-object="detailShopInfoObject"/>
      <detail-info :detail-info="detailInfo"/>
      <detail-params ref="detailParams" :item-params="itemParams"/>
      <detail-evaluation ref="detailEvaluation" :comment-info="commentInfo"/>
      <detail-recommend-info ref="detailRecommendInfo" :recommend-list="recommendList"/>
    </b-scroll>
    <detail-bottom-bar @addToShopCart="addToShopCart"/>
    <detail-product-specifications :is-show="isShow"
                                   :iid="detailBasicInfoObject.iid"
                                   :title="detailBasicInfoObject.title"
                                   :desc="detailBasicInfoObject.discountDesc"
                                   :sku-info="skuInfo"
                                   @close="close"
                                   @success="success"/>
  </div>
</template>

<script>
import BScroll from "@/components/component/bScroll/BScroll";

import DetailNavBar from "./childComponent/DetailNavBar";
import DetailSwiper from "./childComponent/DetailSwiper";
import DetailBasicInfo from "./childComponent/DetailBasicInfo";
import DetailShopInfo from "./childComponent/DetailShopInfo";
import DetailInfo from "./childComponent/DetailInfo";
import DetailParams from "./childComponent/DetailParams";
import DetailEvaluation from "./childComponent/DetailEvaluation";
import DetailRecommendInfo from "./childComponent/DetailRecommendInfo";
import DetailProductSpecifications from "./childComponent/DetailProductSpecifications";

import DetailBottomBar from "@/views/detail/childComponent/DetailBottomBar";

import * as Request from "@/network/detail";
import {BScrollClass, LOGIN_TOKEN, routerPath} from "@/common/constant";
import {DetailBasicInfoClass, DetailShopInfoClass} from "@/views/detail/childComponent/detailClass";

export default {
  name: "Detail",
  data() {
    return {
      bScrollObject: new BScrollClass().setExcessHeight(93).setProbeType(3).setPullUpLoad(500).setImgLoadFunName("detailImgLoad"),
      topImages: [],
      detailBasicInfoObject: {},
      detailShopInfoObject: {},
      detailInfo: {},
      itemParams: {},
      commentInfo: {},
      recommendList: [],
      skuInfo: {},
      navBarList: [0, 0, 0, 0],
      isShow: false,
      msgIndex: null
    }
  },
  created() {
    this.__getDetail();
    this.__getRecommend();
  },
  components: {
    DetailNavBar,
    BScroll,
    DetailSwiper,
    DetailBasicInfo,
    DetailShopInfo,
    DetailInfo,
    DetailParams,
    DetailEvaluation,
    DetailRecommendInfo,
    DetailBottomBar,
    DetailProductSpecifications
  },
  computed: {
    iid() {
      return this.$route.params.iid;
    },
    navBarElList() {
      return [this.$refs.detailSwiper.$el, this.$refs.detailParams.$el, this.$refs.detailEvaluation.$el, this.$refs.detailRecommendInfo.$el]
    }
  },
  methods: {
    __getDetail() {
      Request.getDetail(this.iid).then(res => {
        const data = res.data;
        this.topImages = data.itemInfo.topImages;
        this.detailBasicInfoObject = new DetailBasicInfoClass(data.itemInfo.iid, data.itemInfo.title, data.itemInfo.price, data.itemInfo.oldPrice, data.itemInfo.discountDesc, data.columns, data.shopInfo.services);
        this.detailShopInfoObject = new DetailShopInfoClass(data.shopInfo.shopLogo, data.shopInfo.name, data.shopInfo.cSells, data.shopInfo.cGoods, data.shopInfo.score);
        this.detailInfo = data.detailInfo;
        this.itemParams = data.itemParams;
        if (data.rate.list) {
          this.commentInfo = data.rate.list[0];
        }
        this.skuInfo = data.skuInfo;
      });
    },
    __getRecommend() {
      Request.getRecommend().then(res => {
        this.recommendList = res.data.list;
      });
    },
    titleItemClick(index) {
      this.$refs.bScroll.scrollToElement(this.navBarElList[index]);
    },
    scrollMonitor(position) {
      let paramsTop = this.$refs.detailParams.$el.offsetTop;
      let evaluationTop = this.$refs.detailEvaluation.$el.offsetTop;
      let recommendInfoTop = this.$refs.detailRecommendInfo.$el.offsetTop;
      if (this.navBarList[2] !== paramsTop) {
        this.navBarList[2] = paramsTop;
      }
      if (this.navBarList[1] !== evaluationTop) {
        this.navBarList[1] = evaluationTop;
      }
      if (this.navBarList[0] !== recommendInfoTop) {
        this.navBarList[0] = recommendInfoTop;
      }
      for (const [key, val] of this.navBarList.entries()) {
        if (Math.abs(position.y) >= val) {
          this.$refs.detailNavBar.currentIndex = 3 - key;
          return;
        }
      }
    },
    addToShopCart() {
      if (!localStorage.getItem(LOGIN_TOKEN)) {
        return this.$router.push(routerPath.login);
      }
      if (Object.keys(this.skuInfo).length) {
        this.isShow = true;
      }
    },
    close() {
      this.isShow = false;
    },
    success() {
      this.$layer.close(this.msgIndex);
      this.msgIndex = this.$layer.msg("添加购物车成功", {time: 1});
      this.isShow = false;
    }
  }
}
</script>

<style scoped>
.detail {
  height: 100vh;
}
</style>